<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <!-- <el-form :inline="true" ref="queryRef" class="demo-form-inline">
      <el-form-item label="年份">
        <el-date-picker v-model="queryParams.startTime" type="year" placeholder="选择年份" :disabled-date="disabledDate" />
      </el-form-item>
      <el-form-item label="结束日期">
        <el-date-picker v-model="queryParams.endTime" type="month" placeholder="选择结束日期" format="M月" value-format="MM"
          :disabled-date="disabledDate" @change="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form> -->
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" show-summary v-loading="loading">
      <!-- <el-table-column type="index" width="55" align="center" label="序号" /> -->
      <el-table-column align="center">
        <template #header>
          <p style="font-size: 20px;height: 10px;">累计产值表</p>
          <!--<p style="font-size: 20px;height: 10px;"> {{ year }}年1月——{{ month }}月累计产值表</p> -->
        </template>
        <el-table-column width="180" align="center" label="收入类型">
          <template #default="scope">
            <span v-if="scope.row.name">{{ scope.row.name }}</span>
            <dict-tag v-else :options="redger_type" :value="scope.row.redgerType" />
          </template>
        </el-table-column>
        <el-table-column v-for="item in columnList" :prop="item.deptId" :label="item.deptName" width="125" align="center">
        </el-table-column>
        <el-table-column label="合计" prop="sum" align="center" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="js" setup>
import { getCurrentInstance, ref } from 'vue';
import { getAccumulatedOutputValue, getDeptList } from '@/api/statement.js'
const { proxy } = getCurrentInstance()

const { redger_type } = proxy.useDict("redger_type");

// 获取当年的一月
const now = new Date();
const year = ref(now.getFullYear())
const month = ref(now.getMonth() + 1)
// const january = new Date(year.value, 0, 1);

const queryParams = ref({
  startTime: '',
  endTime: '',
  settlementDate: '1'
})
//改变月份的值
watch(
  () => queryParams.value.startTime,
  (newValue) => {
    if (newValue) {
      year.value = newValue.getFullYear()
    } else {
      year.value = now.getFullYear()
    }
  }, { deep: true })
watch(
  () => queryParams.value.endTime,
  (newValue) => {
    if (newValue) {
      month.value = newValue
    } else {
      month.value = now.getMonth() + 1
    }
  }, { deep: true })

const loading = ref(true)
const tableData = ref([])
const columnList = ref([])
//获取列表数据
const getList = () => {
  loading.value = true;
  getAccumulatedOutputValue(queryParams.value).then(res => {
    const conversionData = Object.values(res.data.reduce((acc, obj) => {
      const redgerType = obj.redger_type || obj.const_category_name;
      const deptId = obj.dept_id;
      const deptName = obj.dept_name;
      const result = obj.result;

      if (!acc[redgerType]) {
        acc[redgerType] = {
          redgerType: redgerType,
          name: obj.name || obj.const_category_name,
          label: deptName,
          data: [],
          sum: ''
        };
      }

      acc[redgerType][deptId] = result;
      acc[redgerType].data.push({
        result: result,
        label: deptName,
        prop: deptId
      });
      acc[redgerType].sum = formatterSum(acc[redgerType].data);

      return acc;
    }, {}));
    getDeptList().then(res => {
      columnList.value = res.data
    })
    tableData.value = conversionData
    loading.value = false;
  }).catch(error => {
    console.log(error);
  })
}
// 日期禁选部分
const disabledDate = (time) => {
  return time.getTime() > Date.now()
}
//计算合计
const formatterSum = (item) => {
  const cellValue = item.reduce((sum, item) => {
    if (item.result) {
      sum += item.result
    } else {
      sum += 0
    }
    return sum
  }, 0)
  return cellValue
}

//查询列表
const handleQuery = () => {
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
getList()
</script>